<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
  <!--<aside class="site-sidebar" :class="'site-sidebar&#45;&#45;' + sidebarLayoutSkin">-->
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="true"
        :unique-opened="true"
        class="site-sidebar__menu">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <!--静态菜单，可以定义没有包含到菜单数据中的页面-->
        <!--<el-submenu index="demo">-->
          <!--菜单栏菜单项-->
          <!--<template slot="title">-->
            <!--<icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>-->
            <!--<span>静态菜单</span>-->
          <!--</template>-->
          <!--菜单项的子页面1-->
          <!--<el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">-->
            <!--<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>-->
            <!--<span slot="title">echarts</span>-->
          <!--</el-menu-item>-->
          <!--菜单项的子页面2-->
          <!--<el-menu-item index="demo-ueditor" @click="$router.push({ name: 'example-editor' })">-->
          <!--<icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
          <!--<span slot="title">编辑器</span>-->
          <!--</el-menu-item>-->

        <!--</el-submenu>-->

        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
          ref="subMenu"
        >
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import {isURL} from '@/utils/validate'

  // 导入theme：getter：
  // 1. 控制sidebar
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      // 添加sidebar计算属性
      ...mapGetters(['sidebar']),
      // 侧边栏颜色
      sidebarLayoutSkin: {
        get () {
          let skin = this.$store.state.theme.sidebarLayoutSkin.dark
          // console.log('skin', skin)
          if (skin) {
            return 'dark'
          } else {
            return 'light'
          }
        }
      },
      // 触发sidebar状态反转
      sidebarFold () {
        let open = !this.sidebar.opended
        return open
      },
      menuList: {
        get () {
          return this.$store.state.common.menuList
        },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
      menuActiveName: {
        get () {
          return this.$store.state.common.menuActiveName
        },
        set (val) {
          this.$store.commit('common/updateMenuActiveName', val)
        }
      },
      menuActiveParentId: {
        get () {
          return this.$store.state.common.menuActiveParentId
        },
        set (val) {
          this.$store.commit('common/updateMenuActiveParentId', val)
        }
      },
      mainTabs: {
        get () {
          return this.$store.state.common.mainTabs
        },
        set (val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      mainTabsActiveName: {
        get () {
          return this.$store.state.common.mainTabsActiveName
        },
        set (val) {
          this.$store.commit('common/updateMainTabsActiveName', val)
        }
      }
    },
    watch: {
      // $route: 'routeHandle'
      // 20190119 根据当前标签，展开对应的菜单目录
      $route: ['routeHandle', 'openHandle'],
      sidebarFold: 'flodHandler'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              // 20190119 根据当前标签，展开对应的菜单目录
              params: route.params,
              query: route.query,
              parentId: route.meta.parentId
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
          // 2019-1-8 保存当前标签的父级菜单ID
          this.menuActiveParentId = tab.parentId + ''
          // console.log('当前路由对应的信息')
          // console.log('this.menuActiveName', this.menuActiveName)
          // console.log('this.mainTabsActiveName', this.mainTabsActiveName)
          // console.log('this.menuActiveParentId', this.menuActiveParentId)
        }
      },
      // 展开当前的菜单
      /**
       * 通过修改状态数据，实现父菜单展开，测试不行
       * 1. 采取vuex修改状态数据menuList中的open值，测试不行。
       * 2. 直接采用修改子组件的open值，提示不能直接修改状态数据
       * 3. 注释掉修改vuex的状态数据，将侧栏菜单常开，再次修改子组件的属性，貌似可以。
       */
      openHandle () {
        let tempParentId = this.menuActiveParentId
        // this.openStatus = tempParentId + ''
        // console.log(this.$refs.subMenu)
        let sf = !this.sidebarFold
        if (sf) {
          this.$refs.subMenu.forEach((element, index, array) => {
            if (element.menu.menuId === tempParentId + '') {
              element[index].menu.open = true
            }
          })
        }
      },
      // 监听sidebarFold的变化
      flodHandler () {
        if (this.sidebarFold) {
          this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
          this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
          this.routeHandle(this.$route)
        }
      }
    }
  }
</script>
